<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">
		<p:panel id="panel" styleClass="pageMenu">
			<h:form id="options">
				<div class="frmOpciones">
					<p:panel id="controles" styleClass="controles">
						<div class="inputOptions">
							<h:outputLabel value="Categoria" for="idCategoria" />
							<p:selectOneMenu id="idCategoria"
								value="#{proyeccionCateoriaClienteProdMBean.idCategoriaProducto}">
								<p:ajax
									listener="#{proyeccionCateoriaClienteProdMBean.crearFiltro()}"
									update=":tabAvance:idAvances" />
								<f:selectItem itemLabel="- Todos -" itemValue="0" />
								<f:selectItems
									value="#{proyeccionCateoriaClienteProdMBean.listaCategoriaProductos}"
									var="categoria" itemLabel="#{categoria.item} #{categoria.nombre}"
									itemValue="#{categoria.id}" />
							</p:selectOneMenu>
						</div>
						<div class="contentSearch" style="float: left;">
							<div class="inputSearch">
								<p:inputText placeholder="Buscar"
									value="#{proyeccionCateoriaClienteProdMBean.txtBuscar}"
									style="border-radius: 0px;" />
							</div>
							<div class="inputImage">
								<p:commandButton styleClass="commanButtom" icon="search"
									title="Icon Only"
									actionListener="#{proyeccionCateoriaClienteProdMBean.crearFiltro()}" update=":tabAvance:idAvances"
									 />
							</div>
						</div>
					</p:panel>
				</div>
			</h:form>
			<div class="frmContenido">
				<p:dataTable id="idAvances" var="producto"
					value="#{proyeccionCateoriaClienteProdMBean.listaProductosTemporal}"
					paginator="true" rows="10"
					paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
					rowsPerPageTemplate="5,10,15" sortMode="multiple" widgetVar="productoFiltrado"
					emptyMessage="No se Econtro Datos" >
					<p:column headerText="Categoria"
						sortBy="#{producto.categoriaProducto}" >
						<h:outputText value="#{producto.categoriaProducto}" />
					</p:column>
					<p:column headerText="codProd" sortBy="#{producto.codProd}">
						<h:outputText value="#{producto.codProd}" />
					</p:column>
					<p:column headerText="Producto" sortBy="#{producto.producto}">
						<h:outputText value="#{producto.producto}" />
					</p:column>
					<p:column headerText="Avance Periodo"
						sortBy="#{producto.avancePorcentaje}">
						<p:progressBar
							styleClass="#{producto.colorBanda}"
							value="#{producto.avancePorcentaje}"
							labelTemplate="{value}%" displayOnly="true" />
					</p:column>
				</p:dataTable>
			</div>
		</p:panel>
</html>